<template>
  <div class="signature-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <el-steps :active="1" finish-status="success">
        <el-step title="上传文件" />
        <el-step title="设置签署位" />
        <el-step title="发送签署" />
        <el-step title="签署完成" />
      </el-steps>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧文件列表 -->
      <div class="left-panel">
        <FileList />
      </div>

      <!-- 中间PDF预览区域 -->
      <div class="center-panel">
        <PdfViewer />
      </div>

      <!-- 右侧签署位设置面板 -->
      <div class="right-panel">
        <SignaturePanel />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FileList from '@/components/FileList.vue'
import PdfViewer from '@/components/PdfViewer.vue'
import SignaturePanel from '@/components/SignaturePanel.vue'
</script>

<style scoped>
.signature-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-panel {
  width: 300px;
  background: white;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.center-panel {
  flex: 1;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
}

.right-panel {
  width: 350px;
  background: white;
  border-left: 1px solid #e4e7ed;
  overflow-y: auto;
}
</style>